<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>房贷计算器</title>
    <link rel="stylesheet" href="/css/common.css" type="text/css">
    <script src="/js/jquery/jquery-3.4.1.js"></script>
    <script src="/js/service/common.js"></script>
    <script>
        window.onload = () => {
            let obj = $('#loanYear');
            let html = `<option value=1>1年</option>`;
            for(let i = 2, j = 30; i <= j; i ++){
                html += `<option value=${i}>${i}年</option>`;
            }
            obj.html(html);
        };
        function search() {
            $.ajax({
                url: '/moneyRate/housingLoan',
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json',
                data: JSON.stringify({
                    'yearRate': $("#yearRate").val(),
                    'loanPrice': $("#loanPrice").val(),
                    'loanYear': $("#loanYear").val(),
                    'loanType': $("#loanType").val()
                }),
                success: function (json) {
                    if(json.code === 200){
                        let moneyLoan = json.data;
                        let repaymentList = moneyLoan.repaymentList;
                        let html = `<tr class="table-tr-head"><td style="width: 10%">期</td>
                                <td style="width: 30%">等额本金还款</td>
                                <td style="width: 30%">等额本息还款</td>
                                <td style="width: 30%">差值</td></tr>`;
                        for(let i = 0, j = repaymentList.length; i < j; i++){
                            let repayment = repaymentList[i];
                            let classId = "table-tr-content-" + ((i % 2) + 1);
                            let difference = repayment.difference;
                            let pre = difference >= 0 ? "多" : "少";
                            html += `<tr class=${classId}>
                                 <td>第${repayment.time}期</td>
                                 <td>${repayment.eqPrincipal}</td>
                                 <td>${repayment.eqPrincipalInterest}</td>
                                 <td>${pre + Math.abs(difference)}</td>
                            </tr>`;
                        }
                        let totalDifference = moneyLoan.totalDifference;
                        let pre = totalDifference >= 0 ? "多" : "少";
                        html += `<tr>
                                 <td>总还款</td>
                                 <td>${moneyLoan.totalEqPrincipalPrice}</td>
                                 <td>${moneyLoan.totalEqPrincipalInterestPrice}</td>
                                 <td>${pre + Math.abs(totalDifference)}</td>
                            </tr>`;
                        $("#table").html(html);
                    }else{
                        tipsMessage(json);
                    }
                },
                error: function (json) {
                    tipsMessage(json);
                }
            });
        }
    </script>
</head>
<body>
    <object class="object-top" data="/page/common/top"></object>
    <div>
        <div class="center-div">
            <form id="form">
                <label>
                    年利率
                </label>
                <label>
                    <input id="yearRate" type="text" name="yearRate">
                </label>
                <label>
                    贷款年
                </label>
                <label>
                    <select id="loanYear" name="loanYear" style="width: 10.9%"></select>
                </label>
                <label>
                    总贷款
                </label>
                <label>
                    <input id="loanPrice" type="text" name="loanPrice">
                </label><br>
                <label><input type="button" class="btn" value="查询" onclick="search()"></label>
                <label><input type="reset" class="btn" value="重置"></label>
            </form>
        </div>
        <div style="text-align: center; margin-top:2%">
            <table id="table" class="table-content" cellspacing="0">
            </table>
        </div>
    </div>
</body>
</html>